<template>
<section class="Order">
    <el-button type="primary" class="closeAll" v-if="type == '1' && requestData1.data.length > 0" @click="closeAll">一键平仓</el-button>
    <el-tabs type="border-card" value="当前持仓" v-model="type" @tab-click="typehide">
        <el-tab-pane :label="$t('order[0]')" name="1">
            <el-table :data="requestData1.data" style="width: 100%">
                <el-table-column prop="order_no" :label="$t('order[1]')" width="150" align="center"></el-table-column>
                <el-table-column prop="name" :label="$t('order[2]')" width="100" align="center"></el-table-column>
                <el-table-column prop="otype" :label="$t('order[3]')" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.otype ==1">{{$t('order[4]')}}</span>
                        <span v-else-if="scope.row.otype ==2">{{$t('order[5]')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" :label="$t('order[6]')" width="150" align="center"></el-table-column>
                <el-table-column prop="sheets" :label="$t('order[7]')" align="center"></el-table-column>
                <el-table-column prop="buy_price" :label="$t('order[8]')" width="130" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.buy_price}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="newprice" :label="$t('order[9]')" width="130" align="center"></el-table-column>
                <el-table-column prop="fee" :label="$t('order[10]')" width="130" align="center"></el-table-column>
                <el-table-column prop="stop_win" :label="$t('order[11]')" width="130" align="center"></el-table-column>
                <el-table-column prop="stop_loss" :label="$t('order[12]')" width="130" align="center"></el-table-column>
                <el-table-column prop="leverage" :label="$t('order[13]')" align="center"></el-table-column>
                <el-table-column prop="floating" :label="$t('order[14]')" align="center"></el-table-column>
                <el-table-column prop="deposit" :label="$t('order[15]')" align="center"></el-table-column>
                <el-table-column prop="dayfee" :label="$t('order2[5]')" align="center"></el-table-column>
                <el-table-column prop="address" :label="$t('order[16]')" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('order[17]')}}</el-button>
                        <el-button type="text" size="small" @click="handle(scope.row)">{{$t('order[18]')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <PagesSize v-if="part" :content="requestData1" @func="getMsgFormSon"></PagesSize>
        </el-tab-pane>
        <el-tab-pane :label="$t('order[19]')" name="2">
            <el-table :data="requestData2.data" style="width: 100%">
                <el-table-column prop="order_no" :label="$t('order[1]')" width="150" align="center"></el-table-column>
                <el-table-column prop="name" :label="$t('order[2]')" width="130" align="center"></el-table-column>
                <el-table-column prop="otype" :label="$t('order[3]')" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.otype ==1">{{$t('order[4]')}}</span>
                        <span v-else-if="scope.row.otype ==2">{{$t('order[5]')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" :label="$t('order[6]')" nim-width="150" align="center"></el-table-column>
                <el-table-column prop="sheets" :label="$t('order[7]')" width="130" align="center"></el-table-column>
                <el-table-column prop="buy_price" :label="$t('order[8]')" width="130" align="center"></el-table-column>
                <el-table-column prop="newprice" :label="$t('order[9]')" width="130" align="center"></el-table-column>
                <el-table-column prop="fee" :label="$t('order[10]')" width="130" align="center"></el-table-column>
                <el-table-column prop="stop_win" :label="$t('order[11]')" width="130" align="center"></el-table-column>
                <el-table-column prop="stop_loss" :label="$t('order[12]')" width="130" align="center"></el-table-column>
                <el-table-column prop="leverage" :label="$t('order[13]')" align="center"></el-table-column>
                <el-table-column prop="floating" :label="$t('order[14]')" width="130" align="center"></el-table-column>
                <el-table-column prop="deposit" :label="$t('order[15]')" align="center"></el-table-column>
                <el-table-column prop="address" :label="$t('order[16]')" width="130" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handlecancellations(scope.row)">{{$t('order[20]')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <PagesSize v-if="part" :content="requestData2" @func="getMsgFormSon"></PagesSize>
        </el-tab-pane>
        <el-tab-pane :label="$t('order2[0]')" name="3">
            <el-table :data="requestData3.data" style="width: 100%">
                <el-table-column prop="order_no" :label="$t('order[1]')" width="200" align="center"></el-table-column>
                <el-table-column prop="name" :label="$t('order[2]')" width="100" align="center"></el-table-column>
                <el-table-column prop="jiancang_at" :label="$t('order2[1]')" nim-width="180" align="center"></el-table-column>
                <el-table-column prop="created_at" :label="$t('fog[3]')" nim-width="180" align="center"></el-table-column>
                <el-table-column prop="otype" :label="$t('order[3]')" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.otype ==1">{{$t('order[4]')}}</span>
                        <span v-else-if="scope.row.otype ==2">{{$t('order[5]')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sheets" :label="$t('order[7]')" align="center"></el-table-column>
                <el-table-column prop="buy_price" :label="$t('order[8]')" width="130" align="center"></el-table-column>
                <!-- <el-table-column prop="price" :label="$t('order2[2]')" width="160"></el-table-column> -->
                <!-- <el-table-column prop="total_price" :label="$t('order2[3]')" width="150"></el-table-column> -->
                <el-table-column prop="stop_win" :label="$t('order[11]')" width="130" align="center"></el-table-column>
                <el-table-column prop="stop_loss" :label="$t('order[12]')" width="130" align="center"></el-table-column>
                <el-table-column prop="sell_price" :label="$t('order2[4]')" width="130" align="center"></el-table-column>
                <el-table-column prop="profit" :label="$t('order[14]')" width="130" align="center"></el-table-column>
                <el-table-column prop="total_price" :label="$t('order[15]')" width="130" align="center"></el-table-column>
                <el-table-column prop="fee" :label="$t('order[10]')" align="center"></el-table-column>
                <el-table-column prop="dayfee" :label="$t('order2[5]')" align="center"></el-table-column>
                <el-table-column prop="pc_type" :label="$t('order2[6]')" width="130" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.pc_type ==1">{{$t('order2[7]')}}</span>
                        <span v-else-if="scope.row.pc_type ==2">{{$t('order2[8]')}}</span>
                        <span v-else-if="scope.row.pc_type ==3">{{$t('order2[9]')}}</span>
                        <span v-else-if="scope.row.pc_type ==4">{{$t('order2[10]')}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <PagesSize v-if="part" :content="requestData3" @func="getMsgFormSon"></PagesSize>
        </el-tab-pane>
    </el-tabs>
    <el-dialog :title="$t('header.tishi[1]')" :visible.sync="dialogVisible" width="420px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :before-close="handleClose">
        <!-- <el-row :gutter="20">
                <el-col :span="6">
                    <div></div>
                </el-col>
                <el-col :span="6">
                    <div></div>
                </el-col>
      </el-row>-->
        <el-form :model="form" label-width="80px">
            <el-form-item :label="$t('msg[5]')">
                <el-input v-model="tableData.newprice" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('order2[11]')">
                <el-input v-model="form.zy" :placeholder="$t('order2[13]')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('order2[12]')">
                <el-input v-model="form.zs" :placeholder="$t('order2[14]')"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">{{$t('order2[15]')}}</el-button>
            <el-button type="primary" @click="dialogVisibleclick">{{$t('order2[16]')}}</el-button>
        </span>
    </el-dialog>
</section>
</template>

<script>
import {
    closePosition,
    cancellations,
    setPoit,
    allClosePosition,
    transData,
    orderList
} from "@/api/contract";
import {
    getToken
} from "@/libs/util";
import PagesSize from "_dom/paging"
export default {
    name: "contractorder",
    props: ["part"],
    data() {
        return {
            tableData: "",
            dialogVisible: false,
            form: {
                zy: "",
                zs: ""
            },
            type: "1",
            changedata: {
                page: "1",
                wid: "1"
            },
            requestData1: {
                data: []
            },
            requestData2: {
                data: []
            },
            requestData3: {
                data: []
            },
            timer: null,
        };
    },
    methods: {
        getMsgFormSon(datavue) { //分页
            this.changedata.page = datavue.page;
            this.typget();
        },
        typehide(row) { //切换
            this.type = row.name;
            this.changedata = {
                page: "1",
                wid: "1"
            };
            this.typget();
        },
        typget() {
            switch (this.type) {
                case '1':
                    this.chicang();
                    if (this.timer) {
                        clearInterval(this.timer);
                    }
                    this.timer = setInterval(() => {
                        this.chicang();
                    }, 3000)
                    break;
                case '2':
                    this.weituo();
                    if (this.timer) {
                        clearInterval(this.timer);
                    }
                    this.timer = setInterval(() => {
                        this.weituo();
                    }, 3000)
                    break;
                case '3':
                    this.chengjiao();
                    if (this.timer) {
                        clearInterval(this.timer);
                    }
                    this.timer = setInterval(() => {
                        this.chengjiao();
                    }, 3000)
                    break;
                default:
                    break;
            }
        },
        chicang() {
            transData({
                data_type: '1'
            }).then(res => {
                if (res.data.status_code == 200) {
                    this.requestData1 = res.data.data;
                }
            }).catch(err => {});
        },
        weituo() {
            transData({
                data_type: '2'
            }).then(res => {
                if (res.data.status_code == 200) {
                    this.requestData2 = res.data.data;
                }
            }).catch(err => {});
        },
        chengjiao() {
            orderList().then(res => {
                if (res.data.status_code == 200) {
                    this.requestData3 = res.data.data;
                }
            }).catch(err => {});
        },

        handleClick(row) { //设置
            this.tableData = row;
            this.dialogVisible = true;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        dialogVisibleclick() {
            let _data = {
                order_no: this.tableData.order_no,
                zy: this.form.zy,
                zs: this.form.zs
            };
            for (var i in _data) {
                if (_data[i] == '') {
                    delete _data[i]
                }
            }
            setPoit(_data)
                .then(res => {
                    this.form = {
                        zy: "",
                        zs: ""
                    };
                    if (res.data.status_code == 200) {
                        this.dialogVisible = false;
                        this.$message({
                            message: this.$t('msg[0]'),
                            type: "success"
                        });
                        // this.$parent.order();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {});
        },
        handle(row) { //平仓
            this.$confirm(this.$t('msg[1]'), this.$t('header.tishi[1]'), {
                type: "warning"
            }).then(() => {
                let _data = {
                    order_no: row.order_no
                };
                closePosition(_data)
                    .then(res => {
                        if (res.data.status_code == 200) {
                            this.$message({
                                message: this.$t('msg[2]'),
                                type: "success"
                            });
                            // this.$emit("func", this.form);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                    .catch(err => {});
            })
        },
        closeAll() { //全平
            allClosePosition().then(res => {
                if (res.data.status_code == 200) {
                    this.$message.success(res.data.message);
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        handlecancellations(row) { //撤单
            this.$confirm(this.$t('msg[3]'), this.$t('header.tishi[1]'), {
                    type: "warning"
                })
                .then(() => {
                    let _data = {
                        order_no: row.order_no
                    };
                    cancellations(_data)
                        .then(res => {
                            if (res.data.status_code == 200) {
                                this.$message({
                                    message: this.$t('msg[4]'),
                                    type: "success"
                                });
                                // this.$emit("func", this.form);
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
                        .catch(err => {});
                })
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
    created() {
       
        if (getToken('token')) {
            this.chicang()
            this.timer = setInterval(() => {
                this.chicang();
            }, 3000)
        };
    },
    components: {
        PagesSize
    }
};
</script>

<style lang="less">
.pagination {
    background: #0a1017 !important;
    margin: 0;
    padding: 20px 0;
}

.el-table th,
.el-table tr,
.el-table__empty-block {
    background-color: #182330;
}

.el-tabs__nav-scroll {
    background-color: #182330;
}
</style>
